<script lang="ts" setup>
interface SingleData{
  id: number;
  name: string;
  number: string;
}
interface OverviewData{
  allData: SingleData[];
  orderData:SingleData[];
}
import { defineComponent, ref } from 'vue';
const OverviewData =ref <OverviewData>({
  allData: [
    {
      id: 1,
      name: "总的销量",
      number: "1554848",
    },
    {
      id: 2,
      name: "总访问量",
      number: "154984205",
    },
    {
      id: 3,
      name: "总支付量",
      number: "15248505",
    },
    {
      id: 4,
      name: "总收藏量",
      number: "156484205",
    },
  ],
  orderData: [
    {
      id: 1,
      name: "今日订单量",
      number: "264",
    },
    {
      id: 2,
      name: "累计金额",
      number: "262424",
    },
    {
      id: 3,
      name: "本月订单量",
      number: "245464",
    },
    {
      id: 4,
      name: "累计金额",
      number: "26542454",
    },
  ],

})

</script>

<template>
  <div id="overview">
    <div class="userinfo">
    <el-avatar
      scr=""
    />
      <span class="username">xxx</span>
      </div>
          <div class="overview-list">
            <div class="overview-item" v-for="item in OverviewData.allData":key="item.id">
              <div class="title">{{item.name}}</div>
                <div class="number">{{ item.number }}</div>
                  </div>
                    </div>

  <div class="overview-list">
    <div class="overview-item" v-for="item in OverviewData.orderData":key="item.id">
      <div class="title">{{item.name}}</div>
      <div class="number">{{ item.number }}</div>
    </div>
  </div>
  </div>
</template>

<style lang="scss" scoped>
#overview{
  .userinfo{
    display: flex;
    align-items: center;
    .username{
      marfin-left: 10px;
    }
  }
  .overview-list{
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    .overview-item{
      width:22%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: var(--el-box-shadow-light);
      border-radius: 10px;
      padding: 20px;

      .title{
        font-weight: 600;
        margin-bottom: 10px;
      }
.number{
  font-size: 18px;
}
    }
  }
}



</style>




































